/*
 * @Author: jiu yin
 * @Date: 2024-06-21 16:41:00
 * @LastEditTime: 2024-06-26 15:20:22
 * @LastEditors: jiu yin zhen jing
 * @FilePath: \studio-web-admin\src\view\pico\component\MapTable.tsx
 * jiu
 */
import { useRef, useState } from "react";
import { map_list_device } from "@/api/home";

import type { ActionType } from "@ant-design/pro-components";
import { ProTable } from "@ant-design/pro-components";
import { ConfigProvider, Image, message } from "antd";
import Deploy from "./Deploy";
import { b_to_mb } from "@/utils";

export default function MapTable(props: any) {
	const { device_real_sn } = props;

	const actionRef = useRef<ActionType>(null);

	const reload = () => {
		actionRef.current && actionRef.current.reload();
	};

	//部署
	let [isModalOpen, setIsModalOpen] = useState(false);
	let [item, setItem] = useState<any>({});

	const columns = [
		{
			dataIndex: "index",
			valueType: "indexBorder",
			width: 48,
		},
		{
			title: "地图名称",
			dataIndex: "nickname",
			hideInSearch: true,
			render: (_: any, item: any) => <p className="c-#161940 text-14px">{item.name}</p>,
		},
		{
			title: "地图描述 ",
			dataIndex: "nickname",
			hideInSearch: true,
			render: (_: any, item: any) => <p className="c-#161940 text-14px">{item.content}</p>,
		},

		{
			title: "上传时间",
			dataIndex: "nickname",
			hideInSearch: true,
			render: (_: any, item: any) => <p className="c-#161940 text-14px">{item.created_at}</p>,
		},
		{
			title: "地图大小",
			dataIndex: "nickname",
			hideInSearch: true,
			render: (_: any, item: any) => <p className="c-#161940 text-14px">{b_to_mb(item.size)}MB</p>,
		},
		{
			title: "地图版本",
			dataIndex: "nickname",
			hideInSearch: true,
			render: (_: any, item: any) => (
				<p className=" text-14px c-#9697A9">
					当前版本： <span className="c-#161940">V{item.version}</span>
				</p>
			),
		},
		{
			title: "操作",
			valueType: "option",
			key: "option",
			render: (_: any, item: any) => [
				<a
					key="editable"
					onClick={() => {
						setItem(item);
						setIsModalOpen(true);
					}}>
					部署其他版本
				</a>,
			],
		},
	];

	return (
		<section className="ml--24px">
			<ConfigProvider>
				<ProTable
					columns={columns}
					actionRef={actionRef}
					request={async (params, sort, filter) => {
						let { data } = await map_list_device({
							page: params.current,
							limit: params.pageSize,
							...params,
							device_real_sn,
						});
						data.data.forEach((item: any, index: number) => (item.key = index + 1));
						return {
							data: data.data,
							success: true,
							total: data.total,
						};
					}}
					rowKey="key"
					tableAlertRender={false}
					search={false}
					options={false}
					pagination={{
						pageSize: 10,
						hideOnSinglePage: true,
					}}
					dateFormatter="string"
				/>
			</ConfigProvider>
			{isModalOpen && <Deploy isModalOpen={[isModalOpen, setIsModalOpen]} item={item} reload={reload}></Deploy>}
		</section>
	);
}
